<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0; }
    img { border: 0; vertical-align: top; }
    body { width: 100%; height: 100%; background-color: #F3F3F3; }

    #mask {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    #carousel {
      position: relative;
      z-index: 2;
      height: 200px;
      margin-top: 200px;

      transform-style: preserve-3d;
      perspective: 800px;
    }
    #carousel img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 300px;
      height: 200px;
      margin-left: -150px;
      margin-top: -100px;
      border-radius: 8px;

      transition: transform 0.5s ease-in-out;
    }
  </style>
</head>
<body>

  <div id="mask"></div>

  <div id="carousel">
    <img src="images/1.png" alt="#">
    <img src="images/2.png" alt="#">
    <img src="images/3.png" alt="#">
    <img src="images/4.png" alt="#">
    <img src="images/5.png" alt="#">
  </div>

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="js/carousel.js"></script>
  <script>
    $(function () {
      $('#carousel').carousel({curDisplay: 0, autoPlay: true, interval: 3000});
    });
  </script>
  
</body>
</html>